<template>
    <a-modal v-model="show" title="新增数据源字段" :maskClosable="false" @cancel="canceladdMould()">
        <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" :model="listInfo" :rules="listInforules"
            ref="ruleForm">
            <a-form-model-item label="数据源字段名称" required prop="DataFieldName">
                <a-input v-model="listInfo.DataFieldName" />
            </a-form-model-item>
            <a-form-model-item label="数据源字段描述">
                <a-textarea style="resize: none" v-model="listInfo.DataFieldDesc" />
            </a-form-model-item>

        </a-form-model>
        <template slot="footer">
            <a-button key="back" @click="canceladdMould">取消</a-button>
            <a-button key="submit" type="primary" @click="addhandleOk">提交</a-button>
        </template>
    </a-modal>
</template>

<script>
import { addDataField } from '@/api/DataField'
export default {
    props: ["show", "listInfo"],
    data() {
        return {

            listInforules: {
                DataFieldName: [
                    { required: true, message: "填写数据源字段名称", trigger: "blur" },
                ],
            }, //添加数据源校验

        };
    },
    methods: {
        //添加模板窗口关闭方法
        canceladdMould() {
            this.$emit("update:show", false);
            this.$refs.ruleForm.clearValidate();
        },
        //添加模板的提交方法
        addhandleOk() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await addDataField(this.listInfo)
                    this.$message.success('添加成功');
                    this.$emit('renewList')
                    this.canceladdMould();

                } else {
                    this.$message.error("请填写完必填信息");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped></style>
